<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城报栈 - 明星</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 确保容器尺寸固定 */
        .wechat-container {
            width: 393px;
            height: 852px;
            position: relative;
            overflow: hidden;
        }
        
        /* 胶囊按钮样式 */
        .capsule-button {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* 分割线样式 */
        .capsule-divider {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* 内容区域样式 */
        .content-area {
            height: 808px;
            overflow-y: scroll;
            background: #FFF8E1;
            scroll-behavior: smooth;
        }
        
        /* 隐藏滚动条 */
        .content-area::-webkit-scrollbar {
            display: none;
        }
        
        /* 渐变背景 */
        .gradient-header {
            background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
        }
        
        /* 卡片阴影 */
        .card-shadow {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        /* 星级评分 */
        .star-rating {
            color: #FFD700;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="wechat-container mx-auto bg-white relative">
        <!-- 状态栏 -->
        <div class="h-11 bg-white flex items-center justify-between px-4 text-black relative z-10">
            <!-- 左侧时间 -->
            <div class="text-sm font-medium">1:41</div>
            
            <!-- 右侧状态图标 -->
            <div class="flex items-center gap-1">
                <!-- 5G网络图标 -->
                <div class="text-xs font-medium">5G</div>
                <!-- 信号强度图标 -->
                <div class="flex items-end gap-0.5 ml-1">
                    <div class="w-1 h-1 bg-black rounded-full"></div>
                    <div class="w-1 h-1.5 bg-black rounded-full"></div>
                    <div class="w-1 h-2 bg-black rounded-full"></div>
                    <div class="w-1 h-2.5 bg-black rounded-full"></div>
                </div>
                <!-- 电池图标 -->
                <div class="ml-1 flex items-center">
                    <div class="w-6 h-3 border border-black rounded-sm relative">
                        <div class="absolute inset-0.5 bg-black rounded-sm" style="width: 74%;"></div>
                    </div>
                    <div class="w-0.5 h-1.5 bg-black rounded-r-sm ml-0.5"></div>
                    <span class="text-xs ml-1">37</span>
                </div>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="relative content-area">
            <!-- 微信胶囊按钮 -->
            <div class="absolute right-3 top-1 flex capsule-button rounded-full h-7 w-18 z-20">
                <!-- 三个点按钮 -->
                <div class="w-9 h-7 flex items-center justify-center">
                    <div class="flex gap-0.5">
                        <div class="w-1 h-1 bg-black rounded-full"></div>
                        <div class="w-1 h-1 bg-black rounded-full"></div>
                        <div class="w-1 h-1 bg-black rounded-full"></div>
                    </div>
                </div>
                <!-- 分割线 -->
                <div class="w-px h-4 capsule-divider self-center"></div>
                <!-- 关闭按钮 -->
                <div class="w-9 h-7 flex items-center justify-center">
                    <div class="w-3.5 h-3.5 border border-black rounded-full"></div>
                </div>
            </div>
            
            <!-- 头部区域 -->
            <div class="gradient-header px-4 pt-3 pb-4">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <button class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </button>
                        <div>
                            <h1 class="text-white text-xl font-bold">明星</h1>
                            <p class="text-white text-xs opacity-90">优质服务推荐</p>
                        </div>
                    </div>
                    <button class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- 分类标签 -->
            <div class="px-4 -mt-2 mb-4">
                <div class="bg-white rounded-xl p-3 card-shadow">
                    <div class="flex space-x-2 overflow-x-auto">
                        <button class="bg-purple-500 text-white px-4 py-2 rounded-full text-sm whitespace-nowrap">全部</button>
                        <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-full text-sm whitespace-nowrap">家政服务</button>
                        <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-full text-sm whitespace-nowrap">维修师傅</button>
                        <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-full text-sm whitespace-nowrap">美食达人</button>
                        <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-full text-sm whitespace-nowrap">宠物专家</button>
                    </div>
                </div>
            </div>
            
            <!-- 明星用户列表 -->
            <div class="px-4 space-y-3">
                <!-- 明星用户1 - 家政服务 -->
                <div class="bg-white rounded-xl p-4 card-shadow">
                    <div class="flex items-start mb-3">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=60&h=60&fit=crop&crop=face" 
                                 alt="明星用户" class="w-15 h-15 rounded-full mr-4">
                            <div class="absolute -top-1 -right-1 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <h3 class="font-bold text-gray-800">李阿姨</h3>
                                <span class="bg-yellow-100 text-yellow-600 px-2 py-1 rounded text-xs">金牌服务</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">专业家政服务 · 5年经验</p>
                            <div class="flex items-center mb-2">
                                <div class="flex star-rating mr-2">
                                    <span>★★★★★</span>
                                </div>
                                <span class="text-sm text-gray-500">4.9分 (128评价)</span>
                            </div>
                            <div class="flex items-center text-sm text-gray-500">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                                </svg>
                                距离您2.3km
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm text-gray-600 mb-2">专业提供家庭清洁、月嫂、育儿嫂等服务，经验丰富，服务贴心，已为100+家庭提供优质服务。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs">家庭清洁</span>
                            <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">月嫂服务</span>
                            <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded text-xs">育儿嫂</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="text-orange-500 font-bold">
                            <span class="text-lg">¥80</span>
                            <span class="text-sm">/小时起</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="bg-gray-100 text-gray-600 px-3 py-2 rounded-lg text-sm">查看详情</button>
                            <button class="bg-purple-500 text-white px-4 py-2 rounded-lg text-sm">立即预约</button>
                        </div>
                    </div>
                </div>
                
                <!-- 明星用户2 - 维修师傅 -->
                <div class="bg-white rounded-xl p-4 card-shadow">
                    <div class="flex items-start mb-3">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=face" 
                                 alt="明星用户" class="w-15 h-15 rounded-full mr-4">
                            <div class="absolute -top-1 -right-1 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <h3 class="font-bold text-gray-800">王师傅</h3>
                                <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs">技术专家</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">水电维修专家 · 8年经验</p>
                            <div class="flex items-center mb-2">
                                <div class="flex star-rating mr-2">
                                    <span>★★★★★</span>
                                </div>
                                <span class="text-sm text-gray-500">4.8分 (95评价)</span>
                            </div>
                            <div class="flex items-center text-sm text-gray-500">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                                </svg>
                                距离您1.8km
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm text-gray-600 mb-2">专业水电维修，管道疏通，家电维修等服务。技术过硬，收费合理，24小时上门服务。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs">水电维修</span>
                            <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">管道疏通</span>
                            <span class="bg-orange-100 text-orange-600 px-2 py-1 rounded text-xs">家电维修</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="text-orange-500 font-bold">
                            <span class="text-lg">¥120</span>
                            <span class="text-sm">/次起</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="bg-gray-100 text-gray-600 px-3 py-2 rounded-lg text-sm">查看详情</button>
                            <button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm">立即预约</button>
                        </div>
                    </div>
                </div>
                
                <!-- 明星用户3 - 美食达人 -->
                <div class="bg-white rounded-xl p-4 card-shadow">
                    <div class="flex items-start mb-3">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=60&h=60&fit=crop&crop=face" 
                                 alt="明星用户" class="w-15 h-15 rounded-full mr-4">
                            <div class="absolute -top-1 -right-1 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <h3 class="font-bold text-gray-800">美食小雅</h3>
                                <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs">美食达人</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">私房菜定制 · 3年经验</p>
                            <div class="flex items-center mb-2">
                                <div class="flex star-rating mr-2">
                                    <span>★★★★★</span>
                                </div>
                                <span class="text-sm text-gray-500">4.9分 (76评价)</span>
                            </div>
                            <div class="flex items-center text-sm text-gray-500">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                                </svg>
                                距离您3.1km
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm text-gray-600 mb-2">专业私房菜定制，家庭聚餐，生日宴会等。食材新鲜，口味地道，让您在家享受餐厅级美食。</p>
                        <div class="grid grid-cols-3 gap-2 mb-2">
                            <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=100&h=80&fit=crop&crop=center" 
                                 alt="美食" class="w-full h-16 rounded-lg object-cover">
                            <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=100&h=80&fit=crop&crop=center" 
                                 alt="美食" class="w-full h-16 rounded-lg object-cover">
                            <img src="https://images.unsplash.com/photo-1546833999-b9f581a1996d?w=100&h=80&fit=crop&crop=center" 
                                 alt="美食" class="w-full h-16 rounded-lg object-cover">
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs">川菜</span>
                            <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">粤菜</span>
                            <span class="bg-yellow-100 text-yellow-600 px-2 py-1 rounded text-xs">私房菜</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="text-orange-500 font-bold">
                            <span class="text-lg">¥200</span>
                            <span class="text-sm">/桌起</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="bg-gray-100 text-gray-600 px-3 py-2 rounded-lg text-sm">查看详情</button>
                            <button class="bg-red-500 text-white px-4 py-2 rounded-lg text-sm">立即预约</button>
                        </div>
                    </div>
                </div>
                
                <!-- 明星用户4 - 宠物专家 -->
                <div class="bg-white rounded-xl p-4 card-shadow">
                    <div class="flex items-start mb-3">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop&crop=face" 
                                 alt="明星用户" class="w-15 h-15 rounded-full mr-4">
                            <div class="absolute -top-1 -right-1 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <h3 class="font-bold text-gray-800">宠物医生陈</h3>
                                <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">宠物专家</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">宠物医疗护理 · 6年经验</p>
                            <div class="flex items-center mb-2">
                                <div class="flex star-rating mr-2">
                                    <span>★★★★★</span>
                                </div>
                                <span class="text-sm text-gray-500">4.9分 (156评价)</span>
                            </div>
                            <div class="flex items-center text-sm text-gray-500">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                                </svg>
                                距离您1.5km
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm text-gray-600 mb-2">专业宠物医疗服务，疫苗接种，健康检查，美容护理等。爱心服务，让您的宠物健康快乐。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs">疫苗接种</span>
                            <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">健康检查</span>
                            <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded text-xs">美容护理</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="text-orange-500 font-bold">
                            <span class="text-lg">¥150</span>
                            <span class="text-sm">/次起</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="bg-gray-100 text-gray-600 px-3 py-2 rounded-lg text-sm">查看详情</button>
                            <button class="bg-green-500 text-white px-4 py-2 rounded-lg text-sm">立即预约</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部占位 -->
            <div class="h-20"></div>
        </div>
    </div>
</body>
</html>